<!--
外边距
    控制盒子与盒子之间的距离。

    margin-top
    margin-right
    margin-bottom
    margin-left
    margin

复合写法（简写）
    margin: 10px;                   // 四周
    margin: 10px 20px;              // 上下、左右
    margin: 10px 20px 30px;         // 上、左右、下
    margin: 10px 20px 30px 40px;    // 上、右、下、左（顺时针）

应用：块级盒子【水平】居中！
    1）必须指定width
    2）外边距左右设置为：auto即可
            margin-left: auto;
            margin-right: auto;
        或者
            margin: auto;
        或者
            margin: 0 auto;   // 推荐
补充：
    行内元素、行内块元素实现水平居中，
    利用给【父元素】添加text-align:center;实现。

拓展：
    1）Edge浏览器的body的外边距四周默认：8px。
    2）【行内元素】尽量只设置左、右外边距，不要设置上、下外边距，
        因为一般情况中，上、下外边距是不起作用的，
        若想要起作用，就转化为【块元素】或【行内块元素】。
-->
<style>
    /* ----------------------------- */
    body {
        /* 四周清空外边距 */
        margin: 0;
    }
    /* ----------------------------- */
    div {
        width: 200px;
        height: 200px;
        background: red;
    }
    .two {
        /* margin-top: 10px;
        margin-left: 20px; */
        margin: 10px 0 0 20px;
    }
    /* ----------------------------- */
    /* 块级元素水平居中 */
    #test {
        width: 500px;
        height: 100px;
        margin: 0 auto;
        background: cyan;
    }
    /* ----------------------------- */
    /* 行内元素、行内块元素水平居中 */
    .father {
        background: cyan;
        text-align: center;
    }
    .son {
        background: skyblue;
    }
</style>

<div></div>
<div class="two"></div>

<p id="test">块元素水平居中</p>

<p class="father">
    <!-- <span class="son">行内元素、行内块元素水平居中</span> -->
    <img class="son" src="./resources/pictures/logo.png" alt="">
</p>